//  要适配屏幕中的元素大小  = 要适配屏幕大小  * 设计稿中元素的大小 / 设计稿大小
// 要适配屏幕大小   100vw
// 设计稿中元素的大小
// 设计稿大小 1920

@ratio: 100vw / 1920;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
}
img {
  vertical-align: middle;
}
a {
  text-decoration: none;
  // 字体颜色 默认是蓝色
  // div标签 字体颜色 默认 是 继承父元素的字体颜色
  color: inherit;
}

// 清除浮动的代码
.clearfix {
  zoom: 1;
}
.clearfix:after {
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
  content: "";
}

// 边框图片的 混合 mixin 声明了一段函数
.borderimage() {
  // 边框图片的知识 4个属性 前两个属性 写死 后两个属性 自己量取
  border-image-source: url(../images/border.png);
  border-style: solid;

  // 边框图片裁剪  不需要加单位
  border-image-slice: 40 40 20 126;

  // 边框图片的宽度  px单位
  border-image-width: 40px 40px 20px 126px;
}

// 小 椭圆
.sm-el(@color) {
  &::before {
    // 默认样式 行内元素
    content: "";
    background-color: @color;
    width: (6 * @ratio);
    height: (13 * @ratio);
    border-radius: (7 * @ratio);
    display: inline-block;
    margin-right: (5 * @ratio);
  }
}

// 声明less变量
@fontColor: #006cff;

body {
  background-image: url(../images/bg.jpg);
  // 全部填充满
  background-size: cover;

  color: #fff;
}

.p-30 {
  padding: (30 * @ratio);
}
.p-20 {
  padding: (20 * @ratio);
}
.m-t-10 {
  margin-top: (10 * @ratio);
}
.m-t-20 {
  margin-top: (20 * @ratio);
}
.fs-22 {
  font-size: (22 * @ratio);
}
.line {
  width: (3 * @ratio);
  background-color: aqua;
  margin: 0 (10 * @ratio);
}

/* 顶部的 logo */
.vis-header {
  img {
    width: 100%;
  }
}

/* 正文 主体 */
.main {
  display: flex;
  padding: 0 (10 * @ratio);

  > div {
    flex: 1;
  }
  .left {
    /* 设备总数 */

    // less 函数或者混合 mixin 。。。。。
    .device-count {
      height: (106 * @ratio);
      // 复用函数 复用 mixin
      .borderimage();

      display: flex;

      // 主轴子项对齐方式
      justify-content: space-around;
      // justify-content: space-evenly;
      .device-count-item {
        display: flex;
        // 主轴方向 上下
        flex-direction: column;
        justify-content: space-around;
        .device-value {
          font-size: (30 * @ratio);
        }
        .device-name {
          font-size: (14 * @ratio);
          color: @fontColor;
          .sm-el(@fontColor);
        }
      }
      .device-count-item:nth-child(2),
      .device-count-item:nth-child(3) {
        .device-name {
          .sm-el(#6acca3);
        }
      }
      .device-count-item:nth-child(4) {
        .device-name {
          .sm-el(#ed3f34);
        }
      }
    }

    /* 故障设备监控 */
    .fault-device {
      height: (470 * @ratio);
      // padding: (30 * @ratio);
      .borderimage();
      .fault-device-title {
        display: flex;
        h4 {
          font-size: (22 * @ratio);
        }
      }
      .fault-device-content {
        margin-top: (10 * @ratio);
        .fault-device-content-title {
          height: (40 * @ratio);
          background-color: #ffffff1a;
          display: flex;
          justify-content: space-around;
          align-items: center;
          div {
            font-size: (13 * @ratio);
            color: @fontColor;
          }
        }
        .fault-device-content-list {
          height: (330 * @ratio);
          overflow: hidden;
          @keyframes ani-ul {
            100% {
              /* 移动自身高的一半 */
              transform: translateY(-50%);
            }
          }

          ul {
            animation: ani-ul 20s linear infinite;
            li {
              height: (20 * @ratio);
              display: flex;
              justify-content: space-around;
              font-size: (12 * @ratio);
              color: @fontColor;
              margin-top: (15 * @ratio);
            }
          }
        }
      }
    }

    /* 点位分布统计 */
    .pd {
      height: (333 * @ratio);
      .borderimage();
      .pd-title {
      }
      .pd-content {
        height: (235 * @ratio);
        display: flex;

        /* 
       子项 高度默认是继承父项的高度 
         */
        .pd-content-chart {
          flex: 1;
        }
        .pd-content-info {
          width: (143 * @ratio);
          background-image: url(../images/rect.png);
          background-size: 100% 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-evenly;
          .pd-item {
            .pd-value {
              font-size: (30 * @ratio);
            }
            .pd-name {
              font-size: (14 * @ratio);
              color: @fontColor;
              .sm-el(red);
            }
          }
          .pd-item:nth-child(2) {
            .pd-name {
              .sm-el(yellow);
            }
          }
        }
      }
    }
  }
  .center {
    margin: 0 (10 * @ratio);

    /* 设备数据统计 */
    .device-data {
      height: (536 * @ratio);
    }

    /*  全国用户总量统计 */
    .users {
      height: (330 * @ratio);
      .borderimage();
    }
  }
  .right {
    /* 订单量 */
    .order-count {
      height: (140 * @ratio);
      .borderimage();
      .order-title {
        display: flex;
        h6 {
          font-size: (20 * @ratio);
          color: blue;
        }
        .active {
          color: #fff;
        }
        .line {
          margin: 0 (20 * @ratio);
        }
      }
      .order-content {
        display: flex;
        .order-item {
          flex: 1;
          .order-value {
            font-size: (30 * @ratio);
          }
          .order-name {
            font-size: (14 * @ratio);
            color: @fontColor;
            .sm-el(red);
          }
        }
        .order-item:nth-child(2) {
          .order-name {
            .sm-el(yellow);
          }
        }
      }
    }

    /* 销售额统计 */
    .sell-count {
      height: (@ratio * 250);
      .borderimage();

      .sell-count-title {
        display: flex;
        h4 {
        }

        .subtitles {
          display: flex;
          .line {
            margin: 0 (@ratio * 25);
          }
          span {
            color: blue;
          }
          .active {
            color: #fff;
          }
        }
      }
      .sell-count-content {
        height: (@ratio * 200);
        // background-color: yellow;
        margin-top: (@ratio * 10);
      }
    }

    /* 渠道分布 */
    .channel {
      height: (215 * @ratio);
      display: flex;
      justify-content: space-between;
      overflow: hidden;
      > div {
        width: (300 * @ratio);
        .borderimage();
      }
      .channel-distribute {
      }
      .channel-progress {
        h4 {
        }
        .channel-charts {
          height: (235 * @ratio);
          // background-color: red;
        }
      }
    }

    /* 全国热榜 */
    .rank {
      height: (273 * @ratio);
      .borderimage();
    }
  }
}
